import { FunctionalComponent, h, Host } from '@stencil/core';
import classnames from 'classnames';
import { CSSStyle } from '../../common/interface';
import { getClassPrefix } from '../../utils/utils';

interface SIconProps {
  /**
   * icon 尺寸 默认 20
   */
  size: number | string;
  /**
   * styles 传入的css样式
   */
  styles: object;
  /**
   * 传入的class名称
   */
  classNames?: string;
  /**
   * 图标颜色
   */
  color: string;
  /**
   * 旋转的角度
   */
  rotate: number;
  /** 
   * 是否自动旋转
   */
  spin: boolean;
  /**
   * 需要渲染的svg数据
   */
  svgData: any;
}

/**
 * @param str
 */
function hyphenate(str) {
  return (str + '').replace(/[A-Z]/g, function (match) {
    return '-' + match.toLowerCase();
  });
}

export const Icon: FunctionalComponent<SIconProps> = ({ size, styles, color, rotate, spin, classNames, svgData }) => {
  if (!svgData) {
    return false;
  }

  const _svgData = svgData.childs.map(child => {
    const attrs = {};
    Object.keys(child.attrs).forEach(attrName => {
      attrs[hyphenate(attrName)] = child.attrs[attrName];
    });

    child.attrs = attrs;
    return child;
  });
  
  const classPrefix: string = getClassPrefix('icon');

  const classes = classnames(classPrefix, classNames, `${classPrefix}-block`, { [`${classPrefix}-spin`]: spin });

  // 初始化 一个变量，先把 color 扔进去
  const outerStyle: CSSStyle = { color };

  // 看下 rotate 是否是个合理的取值，如果是的话，把 outerStyle 的 transform 设置好
  if (Number.isSafeInteger(rotate)) {
      outerStyle.transform = `rotate(${rotate}deg)`;
  }

  // 最后把剩下的 styles 变量都加到当前变量
  Object.assign(outerStyle, styles);

  return (
    <Host>
      <svg width={size} height={size} style={outerStyle} class={classes} {...svgData.attrs}>
        {_svgData.map(child =>
          child.name === 'rect' ? <rect {...child.attrs}></rect> : child.name === 'circle' ? <circle {...child.attrs}></circle> : <path {...child.attrs}></path>,
        )}
      </svg>
    </Host>
  );
}